import React, { useState } from 'react'
import { View, Text, Image } from '@tarojs/components'
import { ConfigProvider, Tabs, TabPane, Grid, GridItem } from '@nutui/nutui-react-taro'
import './index.scss'

function Profile() {
  const [activeTab, setActiveTab] = useState('0')

  // 模拟数据
  const userInfo = {
    avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    nickname: '露营爱好者',
    bio: '热爱自然，享受露营生活',
    postCount: 32,
    followCount: 128,
    followerCount: 256
  }

  const posts = [
    {
      id: 1,
      cover: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      title: '周末湖边露营',
      likeCount: 56,
      commentCount: 12
    },
    {
      id: 2,
      cover: 'https://img01.yzcdn.cn/vant/dog.jpeg',
      title: '森林帐篷体验',
      likeCount: 43,
      commentCount: 8
    },
    {
      id: 3,
      cover: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
      title: '山顶日出',
      likeCount: 128,
      commentCount: 24
    },
    {
      id: 4,
      cover: 'https://img01.yzcdn.cn/vant/apple-2.jpg',
      title: '星空下的篝火',
      likeCount: 89,
      commentCount: 16
    }
  ]

  const likes = [
    {
      id: 1,
      cover: 'https://img01.yzcdn.cn/vant/apple-3.jpg',
      title: '秋季露营攻略',
      author: '露营达人',
      likeCount: 132
    },
    {
      id: 2,
      cover: 'https://img01.yzcdn.cn/vant/apple-4.jpg',
      title: '露营装备推荐',
      author: '户外专家',
      likeCount: 98
    }
  ]

  const follows = [
    {
      id: 1,
      avatar: 'https://img01.yzcdn.cn/vant/cat.jpeg',
      nickname: '露营达人',
      bio: '专业户外导师，10年露营经验'
    },
    {
      id: 2,
      avatar: 'https://img01.yzcdn.cn/vant/dog.jpeg',
      nickname: '户外摄影师',
      bio: '记录美丽风景和露营生活'
    },
    {
      id: 3,
      avatar: 'https://img01.yzcdn.cn/vant/apple-1.jpg',
      nickname: '野炊专家',
      bio: '露营美食制作教程'
    }
  ]

  const handleTabChange = (value) => {
    setActiveTab(value)
  }

  const renderUserInfo = () => {
    return (
      <View className='user-info'>
        <View className='user-header'>
          <Image className='user-avatar' src={userInfo.avatar} mode='aspectFill' />
          <View className='user-meta'>
            <Text className='user-nickname'>{userInfo.nickname}</Text>
            <Text className='user-bio'>{userInfo.bio}</Text>
          </View>
        </View>
        <View className='user-stats'>
          <View className='stat-item'>
            <Text className='stat-value'>{userInfo.postCount}</Text>
            <Text className='stat-label'>作品</Text>
          </View>
          <View className='stat-item'>
            <Text className='stat-value'>{userInfo.followCount}</Text>
            <Text className='stat-label'>关注</Text>
          </View>
          <View className='stat-item'>
            <Text className='stat-value'>{userInfo.followerCount}</Text>
            <Text className='stat-label'>粉丝</Text>
          </View>
        </View>
      </View>
    )
  }

  const renderPosts = () => {
    return (
      <View className='post-grid'>
        <Grid columns={2} gutter={10}>
          {posts.map(post => (
            <GridItem key={post.id}>
              <View className='post-item'>
                <Image className='post-cover' src={post.cover} mode='aspectFill' />
                <Text className='post-title'>{post.title}</Text>
                <View className='post-stats'>
                  <Text className='stat-text'>点赞 {post.likeCount}</Text>
                  <Text className='stat-text'>评论 {post.commentCount}</Text>
                </View>
              </View>
            </GridItem>
          ))}
        </Grid>
      </View>
    )
  }

  const renderLikes = () => {
    return (
      <View className='like-list'>
        {likes.map(like => (
          <View className='like-item' key={like.id}>
            <Image className='like-cover' src={like.cover} mode='aspectFill' />
            <View className='like-info'>
              <Text className='like-title'>{like.title}</Text>
              <Text className='like-author'>{like.author}</Text>
              <Text className='like-count'>点赞 {like.likeCount}</Text>
            </View>
          </View>
        ))}
      </View>
    )
  }

  const renderFollows = () => {
    return (
      <View className='follow-list'>
        {follows.map(follow => (
          <View className='follow-item' key={follow.id}>
            <Image className='follow-avatar' src={follow.avatar} mode='aspectFill' />
            <View className='follow-info'>
              <Text className='follow-nickname'>{follow.nickname}</Text>
              <Text className='follow-bio'>{follow.bio}</Text>
            </View>
            <View className='follow-btn'>关注中</View>
          </View>
        ))}
      </View>
    )
  }

  return (
    <ConfigProvider>
      <View className='profile-page'>
        {renderUserInfo()}
        
        <Tabs 
          value={activeTab} 
          onChange={handleTabChange}
          className='profile-tabs'
        >
          <TabPane title='作品' value='0'>
            {renderPosts()}
          </TabPane>
          <TabPane title='点赞' value='1'>
            {renderLikes()}
          </TabPane>
          <TabPane title='关注' value='2'>
            {renderFollows()}
          </TabPane>
        </Tabs>
      </View>
    </ConfigProvider>
  )
}

export default Profile 